<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类式组件</title>
</head>
<body>
     <!-- 引入React核心库 -->
     <script src="../JS/react.development.js"></script>
     <!-- 引入ReactDOM，用于支持react操作DOM -->
     <script src="../JS/react-dom.development.js"></script>
     <!-- 引入babel 用于将书写的JSX语法 编译成JS语法 -->
     <script src="../JS/babel.min.js"></script>


     <div id="test">

     </div>

     <script type="text/babel">
        /*
            说明 react中 如果你用类式组件
                (1) 你的类 必须得继承另外一个类 (React中内置的一个类(React.Component))
                (2) 必须得使用 render()
        */
        // 1. 创建类式组件
        class Mycomponent extends React.Component {
            render(){
                console.log('react中的this:',this)
                return <h1>我是用类式定义的组件(适用于[复杂组件]的定义)</h1>
            }
        }
        // 2. 渲染组件到页面
        ReactDOM.render(<Mycomponent/>,document.getElementById('test'))       //此处的render 和 上边的 render   没有任何关系 只是 重名而已               
        
            /*
                执行了 ReactDOM.render(<Mycomponent/>,document.getElementById('test')) ....之后 发生了什么?
                    1. React解析组件标签,找到了Mycomponent组件.
                    2. 发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用原型上的render方法.
                    3. 将render返回的虚拟DOM转为真实DOM,随后呈县在页面上.
            */






        /*
            总结陈词
                组件的三大属性(state refs props) , 也就是通过 上边打印出来的 react中的this 里边的  
                
                组件通过本目录中的 存在 两种组件 函数式组件(简单) 类式组件(复杂)
                如何区分'简单'组件 和 '复杂'组件 通过函数中 存不存在 state(状态) 存在 即为'复杂' 反之'简单'


        */



     </script>

</body>
</html>